<template>
  <div class="all-list">
    <el-card class="card-box">
      <template #header>
        <h1>全部订单</h1>
      </template>
      <!--提供用户选择的下拉菜单-->
      <el-form :inline="true" style="margin-top: 15px;">
        <el-form-item label="就诊人">
          <el-select placeholder="请选择就诊人" v-model="patientId" @change="changeUser">
            <el-option label="请选择全部就诊人" value=""></el-option>
            <el-option
                v-for="item in allUser"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select placeholder="请选择订单状态" v-model="orderStatus" @change="changeOrderState">
            <el-option label="全部订单" value=""></el-option>
            <el-option v-for="(item,index) in allOrderState" :key="index" :label="item.comment"
                       :value="item.status"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain icon="Refresh" @click="goReset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格展示订单的数据 -->
      <el-table
          :data="allOrderArr"
          border
          style="width: 100%;margin: 10px 0;"
      >
        <el-table-column label="订单号" prop="id" width="100"/>
        <el-table-column label="就诊人" prop="patientName" width="120"/>
        <el-table-column label="就诊时间" prop="reserveDate" width="150"></el-table-column>
        <el-table-column label="医院" prop="hosname" width="150"></el-table-column>
        <el-table-column label="科室" prop="depname" width="180"></el-table-column>
        <el-table-column label="医生" prop="title" width="120"></el-table-column>
        <el-table-column label="服务费" prop="amount" width="120"></el-table-column>
        <el-table-column label="订单状态" prop="param.orderStatusString" width="150"/>
        <el-table-column label="操作" width="150">
          <template #="row">
            <el-button type="primary" icon="Pointer" @click="goDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
          style="margin:20px 0;"
          v-model:current-page="pageNo"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40, 50]"
          :background="true"
          layout="prev, pager, next, jumper,->,sizes,total"
          :total="total"
          @current-change="getOrderInfo"
          @size-change="handler"
      />
    </el-card>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import {reqUserOrderInfo, reqAllUser, reqOrderState} from '@/api/user'
import {useRouter} from "vue-router";

const router = useRouter()
//当前分页器页码
const pageNo = ref(1);
let total = ref(0);
//当前页码展示几条数据
const pageSize = ref(10);
// 就诊人ID
const patientId = ref('')
// 全部就诊人数据
const allUser = ref([])
//存储全部的订单
const allOrderArr = ref([]);
// 全部订单状态数据
const allOrderState = ref([])
const orderStatus = ref('')

//组件挂载完毕的钩子
onMounted(() => {
  //获取订单的方法
  getOrderInfo();
  //获取全部就诊人的信息以及获取全部的订单的状态
  getData();
});

// 获取全部订单的数据
const getOrderInfo = async (pager) => {
  pageNo.value = pager || 1;
  const res = await reqUserOrderInfo(
      pageNo.value,
      pageSize.value,
      patientId.value,
      orderStatus.value
  );
  if (res.code === 200) {
    allOrderArr.value = res.data.records;
    total.value = res.data.total;
  } else {
    return res.message;
  }
}

//下拉菜单事件的回调
const handler = (pageSizes) => {
  pageSize.value = pageSizes;
  getOrderInfo();
};

// 获取全部就诊人的信息以及获取全部的订单的状态
const getData = async () => {
  // 获取全部就诊人的信息
  const res1 = await reqAllUser();
  if (res1.code === 200) {
    allUser.value = res1.data;
  } else {
    return res1.message;
  }
  // 获取全部的订单的状态
  const res2 = await reqOrderState();
  if (res2.code === 200) {
    allOrderState.value = res2.data;
  } else {
    return res2.message;
  }
}

//就诊人下拉菜单回调方法
const changeUser = () => {
  //根据就诊人的ID再次获取挂号订单的数据
  getOrderInfo();
};

//订单状态下拉菜单回调
const changeOrderState = () => {
  getOrderInfo();
}

// 详情页跳转(携带查询参数订单ID)
const goDetail = () => {
  const patientId = allOrderArr.value[0].patientId;
  router.push({ path: "/user/orders", query: { orderId: patientId } });
};



// 重置订单状态
const goReset = () => {
  patientId.value = '';
  orderStatus.value = '';
  getOrderInfo();
};


</script>


<style scoped lang="scss">
.all-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 20px;

  .card-box {
    width: 100%;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    h1 {
      font-size: 24px;
      font-weight: bold;
      color: #7f7f7f;
    }

    .el-select {
      width: 200px;
    }

    .el-form-item {
      margin-bottom: 10px;
    }
  }
}

</style>